import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';
import { isContained } from '../utils/util';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

Vue.use(Router);
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

const createRouter = () => new Router({
    routes: [
        {
            path: '/',
            redirect: '/dashboard'
        },
        {
            path: '/error',
            component: () => import(/* webpackChunkName: "home" */ '../components/common/layout/layout1'),
            children: [
                {
                    path: '/404',
                    component: () => import(/* webpackChunkName: "404" */ '../components/common/404.vue'),
                    meta: { title: '404' }
                },
                {
                    path: '/403',
                    component: () => import(/* webpackChunkName: "403" */ '../components/common/403.vue'),
                    meta: { title: '403' }
                }
            ]
        },
        {
            path: '/',
            component: () => import(/* webpackChunkName: "home" */ '../components/common/layout/layout1'),
            children: [
                {
                    path: '/dashboard',
                    component: () => import(/* webpackChunkName: "dashboard" */ '../components/common/Dashboard.vue'),
                    meta: { title: '系统首页' }
                }
            ]
        },
        {
            path: '/login',
            component: () => import(/* webpackChunkName: "login" */ '../components/common/Login.vue'),
            meta: { title: '登录' }
        },
        {
            path: '*',
            redirect: '/404'
        }
    ]
});

const router = createRouter()

export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
}

// 转换vue-router所用路由
export function parseRouters(viewRoutes) {
    let asyncRouters = JSON.parse(JSON.stringify(viewRoutes)).map(route => {
        route.title = route.name;
        if (route.meta.iframeUrl) {
            route.props = {
                src: route.meta.iframeUrl
            }
            route.component =  () => import('../components/common/IFrame.vue')
        } else {
            route.component = () => import(`@/${route.viewPath}`)
        }
        return route
    })
    return [
        {
            path: '/',
            component: () => import('../components/common/layout/layout1'),
            meta: { title: '动态路由' },
            children: asyncRouters
        }
    ]
}

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    // 开启进度条
    NProgress.start()
    // 设置页面标题
    document.title = `${to.meta.title} | 后台管理系统`;
    // 读取 当前token 以及 权限信息
    let token = store.getters.token
    let permission = store.getters.permission
    if (!token  && to.path !== '/login') {
        next('/login');
    } else if (to.meta.perms) {
        // 切割页面需要的权限
        let perms = to.meta.perms.split(',')
        // 判断所有权限是否包含需要权限
        isContained(permission, perms) ? next() : next('/403');
    } else {
        // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
        if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
            Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
                confirmButtonText: '确定'
            });
        } else {
            next();
        }
    }
});

router.afterEach(() => {
    // finish progress bar
    NProgress.done()
})

export default router

